<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 运动商城</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        .register-card {
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            border-radius: 10px;
            border: none;
        }
        .register-card .card-header {
            border-radius: 10px 10px 0 0;
            background: linear-gradient(135deg, #007bff, #0056b3);
        }
        .register-form .form-control {
            border-radius: 5px;
            padding: 10px 15px;
            border: 1px solid #ddd;
            transition: all 0.3s ease;
        }
        .register-form .form-control:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
        }
        .register-btn {
            padding: 10px 20px;
            border-radius: 5px;
            font-weight: 600;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            background: linear-gradient(135deg, #007bff, #0056b3);
            border: none;
        }
        .register-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            background: linear-gradient(135deg, #0069d9, #0049b3);
        }
        .form-group {
            margin-bottom: 1.2rem;
        }
        .alert-danger {
            border-left: 4px solid #dc3545;
        }
        .text-muted {
            font-size: 12px;
        }
        .login-link {
            color: #007bff;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        .login-link:hover {
            color: #0056b3;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <jsp:include page="common/header.jsp"/>
    
    <!-- 注册表单 -->
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card register-card">
                    <div class="card-header text-white">
                        <h4 class="mb-0">用户注册</h4>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-danger d-none" id="registerError"></div>
                        <form id="registerForm" class="register-form">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="username">用户名 <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="username" name="username" required>
                                        <small class="form-text text-muted">用户名只能包含字母、数字和下划线</small>
                                    </div>
                                    <div class="form-group">
                                        <label for="password">密码 <span class="text-danger">*</span></label>
                                        <input type="password" class="form-control" id="password" name="password" required>
                                        <small class="form-text text-muted">密码长度至少6位，包含字母和数字</small>
                                    </div>
                                    <div class="form-group">
                                        <label for="confirmPassword">确认密码 <span class="text-danger">*</span></label>
                                        <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="email">邮箱</label>
                                        <input type="email" class="form-control" id="email" name="email">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="phone">手机号码</label>
                                        <input type="tel" class="form-control" id="phone" name="phone">
                                    </div>
                                    <div class="form-group">
                                        <label for="realName">真实姓名</label>
                                        <input type="text" class="form-control" id="realName" name="realName">
                                    </div>
                                    <div class="form-group">
                                        <label>性别</label>
                                        <div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="gender" id="genderMale" value="1">
                                                <label class="form-check-label" for="genderMale">男</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="gender" id="genderFemale" value="2">
                                                <label class="form-check-label" for="genderFemale">女</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="gender" id="genderUnknown" value="0" checked>
                                                <label class="form-check-label" for="genderUnknown">保密</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="address">收货地址</label>
                                        <textarea class="form-control" id="address" name="address" rows="3"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group form-check">
                                <input type="checkbox" class="form-check-input" id="agreement" required>
                                <label class="form-check-label" for="agreement">我已阅读并同意<a href="#">用户协议</a>和<a href="#">隐私政策</a></label>
                            </div>
                            <button type="button" id="registerBtn" class="btn btn-primary btn-block register-btn">注册</button>
                        </form>
                        <div class="mt-3 text-center">
                            <p>已有账号？<a href="${pageContext.request.contextPath}/login" class="login-link">立即登录</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 页脚 -->
    <jsp:include page="common/footer.jsp"/>
    
    <!-- JavaScript 文件 -->
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            // 使用按钮点击事件而不是表单提交
            $('#registerBtn').click(function() {
                try {
                    // 重置错误信息
                    var errorElement = document.getElementById('registerError');
                    errorElement.classList.add('d-none');
                    errorElement.textContent = '';
                    
                    // 获取表单值
                    var username = $('#username').val();
                    var password = $('#password').val();
                    var confirmPassword = $('#confirmPassword').val();
                    var email = $('#email').val();
                    var phone = $('#phone').val();
                    var realName = $('#realName').val();
                    var gender = $('input[name="gender"]:checked').val();
                    var address = $('#address').val();
                    
                    // 验证用户名
                    if (!/^[a-zA-Z0-9_]{3,16}$/.test(username)) {
                        errorElement.classList.remove('d-none');
                        errorElement.textContent = '用户名只能包含字母、数字和下划线，长度3-16位';
                        return;
                    }
                    
                    // 验证密码
                    if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/.test(password)) {
                        errorElement.classList.remove('d-none');
                        errorElement.textContent = '密码长度至少6位，且必须包含字母和数字';
                        return;
                    }
                    
                    // 验证两次密码是否一致
                    if (password !== confirmPassword) {
                        errorElement.classList.remove('d-none');
                        errorElement.textContent = '两次输入的密码不一致';
                        return;
                    }
                    
                    // 检查是否勾选协议
                    var isChecked = document.getElementById('agreement').checked;
                    if (!isChecked) {
                        errorElement.classList.remove('d-none');
                        errorElement.textContent = '请阅读并同意用户协议和隐私政策';
                        return;
                    }
                    
                    // 提交注册信息 - 直接使用原生XMLHttpRequest
                    var xhr = new XMLHttpRequest();
                    xhr.open('POST', '${pageContext.request.contextPath}/user/register', true);
                    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                    
                    xhr.onload = function() {
                        var response;
                        try {
                            response = JSON.parse(xhr.responseText);
                            if (response.success) {
                                alert('注册成功，请登录');
                                window.location.href = '${pageContext.request.contextPath}/login';
                            } else {
                                errorElement.classList.remove('d-none');
                                errorElement.textContent = response.message || '注册失败';
                            }
                        } catch(e) {
                            errorElement.classList.remove('d-none');
                            errorElement.textContent = '注册失败: 无法解析服务器响应';
                        }
                    };
                    
                    xhr.onerror = function() {
                        errorElement.classList.remove('d-none');
                        errorElement.textContent = '注册失败，请稍后再试';
                    };
                    
                    // 构建请求数据
                    var data = 'username=' + encodeURIComponent(username) + 
                               '&password=' + encodeURIComponent(password);
                    
                    if (email) data += '&email=' + encodeURIComponent(email);
                    if (phone) data += '&phone=' + encodeURIComponent(phone);
                    if (realName) data += '&realName=' + encodeURIComponent(realName);
                    if (gender) data += '&gender=' + encodeURIComponent(gender);
                    if (address) data += '&address=' + encodeURIComponent(address);
                    
                    xhr.send(data);
                } catch (e) {
                    alert('注册过程中出现错误: ' + e.message);
                }
            });
            
            // 移除表单原来的提交事件
            $('#registerForm').submit(function(e) {
                e.preventDefault();
            });
        });
    </script>
</body>
</html> 